<template>
    <li class="animated fadeIn" data-id="Boxofmacaroons1999_1">
        <input type="hidden" :value="product.id"/>
        <span class="cart-name">{{product.name}}</span>
        <span class="cart-price">{{currency(product.price)}}</span>x
        <input type="number" min="1" :value="count" @change="update" class="cart-input">
        <button class="cart-remove" @click="removeFromCart(product)">×</button>
    </li>
</template>

<script>
    import format from '@cart/js/currency.js'
    import {mapState, mapGetters,mapMutations, mapActions} from 'vuex'
export default {
    data: function () {
        return {
        }
    },
    computed:{
      internalCount: {
          get: function () {
              return this.count
          },
          set: function (count) {
              count = Number.parseInt(count)
              let payload = {product: this.product, count: Number.isNaN(count) ? 1 : count, oldcount: this.count}
              this.updateProductCount(payload)
             // this.$forceUpdate()   //由于上述操作未必成功，因此强制重新刷新组件
          }
      }
    },
    watch:{
    },
    props: {
        product: {
          type: Object
        },
        count: {
            required: true,
            type: Number,
            validator: function (value) {
                return value >= 1
            }
        }
    },
    methods: {
        currency: format,
        ...mapActions(['removeFromCart','updateProductCount']),
        update: function (event) {
            let count = Number.parseInt(event.target.value)
            let payload = {product: this.product, count: Number.isNaN(count) ? 1 : count, oldcount: this.count}
            this.updateProductCount(payload)
            this.$forceUpdate()   //由于上述操作未必成功，因此强制重新刷新组件
        }
    }
}
</script>

<style>
    li{
        border-bottom: 1px solid #eee;
        padding: 10px 0;
        position: relative;
    }
    .cart-name{
        display: block;
        padding: 10px 0;
    }
    .cart-price{
        display: inline-block;
        color: #fe4578;
    }
    .cart-input{
        display: inline-block;
    }
    .cart-input:hover {
        border-color: #8391a5;
    }
    .cart-input {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #bfcbd9;
        box-sizing: border-box;
        color: #1f2d3d;
        font-size: inherit;
        height: 1.5em;
        line-height: 1;
        outline: 0;
        padding: 3px 10px;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        width: 3em;
        display: inline-block;
    }
    .cart-remove{
        background: none;
        border: none;
        /*右对齐 垂直居中*/
        position: absolute;
        width: 1em;
        height: 1em;
        right: 10px;
        top: 0;
        bottom: 0;
        margin: auto;

        color: #fe4578;
    }
</style>
